<template>
	<view class="content">
		<!-- 主体 -->
		<view class="main">
				<!--<wInput
					v-model="userInfo.phone"
					type="text"
					maxlength="11"
				></wInput> -->
				<wInput
					v-model="phoneData"
					type="text"
					maxlength="11"
					placeholder="新手机号码"
				></wInput>
				<wInput
					v-model="verCode"
					type="number"
					maxlength="6"
					placeholder="验证码"
					isShowCode
					ref="runCode"
					@setCode="getVerCode()"
				></wInput>
			</view>
			
			<wButton 
				text="修改/绑定手机"
				:rotate="isRotate" 
				@click.native="startReg()"
			></wButton>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import {  
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				//logo图片 base64
				phone:'',
				phoneData:'', // 用户/电话
				verCode:"", //验证码
				isRotate: false, //是否加载旋转
			}
		},
		components:{
			wInput,
			wButton,
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		mounted() {
			_this= this;
		},
		methods: {
			getVerCode(){
				/* var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				//获取验证码
				if (_this.phoneData.length != 11 || !myreg.test(this.phoneData)) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号不正确'
				    });
				    return false;
				} */
				let phoneData = this.phoneData;
				if(!_this.$mHelper.checkPhone(phoneData)){
					this.$mHelper.toast('手机号不正确');
					return false;
				}
				
				this.$http.post('api/common/smsmobile',{phone:phoneData}).then(res=>{
					this.$mHelper.toast(res.msg);
					if(this.sucCode === res.code){
						this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
						this.isSendCode = true;
						
					}
				}).catch(err=>{
					console.log(err);
				})
				
				
				
				/* this.$api.get('/sms/send_register_msg',{
					smsSendType: 3,
					mobilePhone: this.phoneData,
				}).then(r=>{
					if(r.data.code == 200){
						uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: '发送成功！'
						});
						this.$refs.runCode.$emit('runCode');
						this.isSendCode = true;
						setTimeout(function(){
							_this.$refs.runCode.$emit('runCode',0); //假装模拟下需要 终止倒计时
							_this.isSendCode = false;
						},60000)
					}else{
						uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: r.data.message
						});
					}
					
				}) */
				
			},
		    startReg() {
				//注册
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				/* var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				if (this.phoneData.length !=11 || !myreg.test(this.phoneData)) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号不正确'
				    });
				    return false;
				} */
				let phoneData = this.phoneData;
				if(!_this.$mHelper.checkPhone(phoneData)){
					this.$mHelper.toast('手机号不正确');
					return false;
				}
				if (this.verCode.length != 6) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '验证码不正确'
				    });
				    return false;
				}
				_this.isRotate=true;
				let params = {};
				params.code = this.verCode;
				params.phone = this.phoneData;
				_this.$http.post('api/user/changemobile',params).then(res=>{
					_this.$mHelper.toast(res.msg);
					_this.isRotate=false;
					if(_this.sucCode === res.code){
						setTimeout(function(){
							uni.navigateBack();
						},2000);
						
					}
				}).catch(err=>{
					console.log(err);
				})
				
				/* this.$api.memberPost('/changePhone',{
					phone: this.phoneData,
					validCode: this.verCode
				},{
					'Content-Type': 'application/x-www-form-urlencoded'
				}).then(r=>{
					if(r.data.code == '200'){
						uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: '修改成功'
						});
						setTimeout(function(){
							uni.navigateBack();
						},2000);
					}else{
						uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: r.data.message
						});
					}
					_this.isRotate=false
				}); */
		    }
		}
	}
</script>

<style>
	/* 主体 */
	.main {
		display: flex;
		flex-direction: column;
		padding-left: 70upx;
		padding-right: 70upx;padding-top:70upx
	}
	.tips {
		color: #999999;
		font-size: 28upx;
		margin-top: 64upx;
		margin-left: 48upx;
	}
	
	/* 其他登录方式 */
	.other_login{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 256upx;
		text-align: center;
	}
	.login_icon{
		border: none;
		font-size: 64upx;
		margin: 0 64upx 0 64upx;
		color: rgba(0,0,0,0.7)
	}
	.wechat_color{
		color: #83DC42;
	}
	.weibo_color{
		color: #F9221D;
	}
	.github_color{
		color: #24292E;
	}
	
	/* 底部 */
	.footer{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-top: 64upx;
		color: rgba(0,0,0,0.7);
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}
	.footer .t{
		margin-top: 3upx;
	}
	.footer .line{font-size: 24upx;
	margin-left: 15upx;
	margin-right: 15upx;}
</style>